<!-- 用户界面布局组件 -->
<template>
  <div class="main-container">
    <!-- 左侧菜单 -->
    <SideMenuComponent @menu-selected="onMenuSelected" />

    <!-- 右侧内容区域 -->
    <div class="content-area">
      <CarouselComponent v-if="!selectedSubject" />
      <SubjectListComponent v-else :subject="selectedSubject" />
    </div>
  </div>
</template>

<script>
import SideMenuComponent from './SideMenuComponent.vue';
import CarouselComponent from './CarouselComponent.vue';
import SubjectListComponent from './SubjectListComponent.vue';

export default {
  components: {
    SideMenuComponent,
    CarouselComponent,
    SubjectListComponent
  },
  data() {
    return {
      selectedSubject: null // 当前选中的科目
    };
  },
  methods: {
    onMenuSelected(subject) {
      this.selectedSubject = subject;
    }
  }
};
</script>

<style scoped>
.main-container {
  display: flex;
}

.content-area {
  flex: 1;
  padding: 20px;
}
</style>